// 订单管理
<template>
  <div class="order-list">
    <h2>我的订单</h2>

    <div v-if="orders.length === 0" class="empty-orders">
      <p>您还没有任何订单</p>
      <router-link to="/products" class="btn btn-primary">
        去选购商品
      </router-link>
    </div>

    <div v-else>
      <div class="list-group">
        <div
            v-for="order in orders"
            :key="order.id"
            class="list-group-item mb-3"
        >
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <h5>订单号: {{ order.id }}</h5>
              <p>下单时间: {{ formatDate(order.createdAt) }}</p>
              <p>总金额: <span class="text-danger fw-bold">¥{{ order.totalAmount }}</span></p>
            </div>
            <div>
              <span :class="statusClass(order.status)">
                {{ orderStatusText(order.status) }}
              </span>
            </div>
            <div>
              <router-link
                  :to="`/orders/${order.id}`"
                  class="btn btn-sm btn-outline-primary me-2"
              >
                详情
              </router-link>
              <button
                  v-if="order.status === 'PENDING_PAYMENT'"
                  class="btn btn-sm btn-success me-2"
                  @click="payOrder(order.id)"
              >
                支付
              </button>
              <button
                  v-if="order.status === 'PENDING_PAYMENT' || order.status === 'PAID'"
                  class="btn btn-sm btn-danger"
                  @click="cancelOrder(order.id)"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { orderApi } from '@/api'

export default {
  setup() {
    const orders = ref([])
    const userId = localStorage.getItem('userId')

    const orderStatusText = (status) => {
      const statusMap = {
        'PENDING_PAYMENT': '待支付',
        'PAID': '已支付',
        'SHIPPED': '已发货',
        'COMPLETED': '已完成',
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    }

    const statusClass = (status) => {
      return {
        'badge': true,
        'bg-secondary': status === 'PENDING_PAYMENT',
        'bg-success': status === 'PAID' || status === 'COMPLETED',
        'bg-primary': status === 'SHIPPED',
        'bg-danger': status === 'CANCELLED'
      }
    }

    const formatDate = (dateString) => {
      return new Date(dateString).toLocaleString()
    }

    const loadOrders = async () => {
      if (!userId) return

      try {
        orders.value = await orderApi.getAll()
      } catch (error) {
        console.error('加载订单失败:', error)
      }
    }

    const payOrder = async (orderId) => {
      try {
        await orderApi.pay(orderId)
        alert('支付成功！')
        loadOrders()
      } catch (error) {
        console.error('支付失败:', error)
      }
    }

    const cancelOrder = async (orderId) => {
      if (!confirm('确定要取消订单吗？')) return

      try {
        await orderApi.cancel(orderId)
        alert('订单已取消')
        loadOrders()
      } catch (error) {
        console.error('取消订单失败:', error)
      }
    }

    onMounted(loadOrders)

    return {
      orders,
      orderStatusText,
      statusClass,
      formatDate,
      payOrder,
      cancelOrder
    }
  }
}
</script>

<style scoped>
.empty-orders {
  text-align: center;
  padding: 50px 0;
}

.list-group-item {
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>